<template>
  <div class="sidebar">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleMenuSelect"
    >
      <div class="logo" index="0">
        <span class="logo-text">只此秦旅</span>
      </div>

      <el-menu-item index="1">
        <i class="el-icon-s-home"></i>
        <span>首页</span>
      </el-menu-item>

      <el-menu-item index="11">
        <i class="el-icon-user"></i>
        <span>知识图谱</span>
      </el-menu-item>

      <el-menu-item index="3">
        <i class="el-icon-user"></i>
        <span>角色设定</span>
      </el-menu-item>

      <el-submenu index="4">
        <template #title>
          <i class="el-icon-notebook-2"></i>
          <span>手账生成</span>
        </template>
        <el-menu-item index="4-1">手账制作</el-menu-item>
      </el-submenu>


      <!-- 管理者菜单项 -->
      <template v-if="isUserLoggedIn && showAdminMenu">
        <el-menu-item index="5">
          <i class="el-icon-document"></i>
          <span>问答对数据管理</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-location"></i>
          <span>景区信息管理</span>
        </el-menu-item>
        <el-menu-item index="8">
          <i class="el-icon-setting"></i>
          <span>管理员管理</span>
        </el-menu-item>
      </template>
      <template v-if="!isUserLoggedIn && !showAdminMenu">
        <el-menu-item index="9">
          <i class="el-icon-check"></i>
          <span>提交问答对</span>
        </el-menu-item>
      </template>
      <el-menu-item index="6">
        <i class="el-icon-user"></i>
        <span>个人信息</span>
      </el-menu-item>
      <template v-if="isUserLoggedIn && showAdminMenu">
        <el-menu-item index="10">
          <i class="el-icon-check"></i>
          <span>审核问答对</span>
        </el-menu-item>
      </template>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import store from '@/store/index.js';

export default {
  setup() {
    const router = useRouter();
    const activeMenu = ref('1');
    const isUserLoggedIn = computed(() => store.state.isAuthenticated);
    const showAdminMenu = computed(() => isUserLoggedIn.value && store.state.userRole === 'admin');

    const handleMenuSelect = (index) => {
      activeMenu.value = index;
      switch (index) {
        case '0':
          router.push('/');
          break;
        case '1':
          router.push('/');
          break;
        case '3':
          router.push('/role-setting');
          break;
        case '4-1':
          router.push('/notebook-creation');
          break;
        case '4-2':
          router.push('/notebook-history');
          break;
        case '5':
          router.push('/qa-management');
          break;
        case '7':
          router.push('/scenic-management');
          break;
        case '9':
          router.push('/workflow');
          break;
        case '8':
          router.push('/admin-management');
          break;
        case '10':
          router.push('/workflow1');
          break;
        case '11':
          router.push('/know');
          break;
        case '6':
          router.push('/user-info');
          break;
      }
    };

    return {
      activeMenu,
      handleMenuSelect,
      isUserLoggedIn,
      showAdminMenu,
    };
  },
};
</script>

<style>
.top-bar {
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
}

.welcome-text {
  color: #333;
  font-size: 14px;
}

.main-content {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f0f2f5;
  overflow-y: auto;
}

.el-menu {
  border: none !important;
}

.el-menu-vertical {
  border-right: none;
  width: 100%;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-text {
  font-family: KaiTi, '楷体';
  font-size: 20px;
  color: white;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
}

.user-link {
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

.user-link:hover {
  color: #1890ff;
}

.logo-text {
  font-family: 'KaiTi', sans-serif;
  font-size: 20px;
  color: white;
}

.main-content {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f0f2f5;
  overflow-y: auto;
  min-height: 0; /* 确保 flex 子项可以缩小 */
}
</style>
